<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>append和appendTo</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        p{
            border: 1px solid blue;
        }
    </style>
    <script type="text/javascript" src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //使用append：无法用选择器做参数
            // $('div').append('p');
            // $('div').appendTo('p');
            //appendTo:可以使用选择器 让页面的已存在元素被移动
            // $('p').appendTo('div');
            // $('<div>div3</div>').appendTo('div')
            //追加到div标签内部的最前面
            // $('p').prependTo('div');
            //把第一个div插入到p标签之前
            // $('p').insertBefore('div:first');
            //把第一个div插入到p标签之后
            // $('div:first').insertAfter('p');
            //用页面内已存在的p标签替换div标签
            // $('p').replaceAll('div');
            //移除第2个div标签
            // $('div:eq(1)').remove();
            //清空body标签内的所有元素
            $('body').empty()
        });
    </script>
</head>
<body>
<div>div1</div>
<div>div2</div>
<p>这是一个文字段落</p>
</body>
</html>